<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>商品列表—易购触屏版</title>
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <link rel="stylesheet" type="text/css" href="css/foot.css" />
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(function () {
            $.ajax({
                url: "http://localhost:8080/shop/h1/goods/list",
                type: "post",
                //定义发送请求的数据格式为JSON字符串
                contentType: "application/json;charset=UTF-8",
                //定义回调响应的数据格式为JSON字符串
                dataType: "json",
                //成功响应的结果
                success: function (data) {
                    $('#main').empty();
                    console.log(data.list);
                    var html = '';
                    $.each(data.list, function (index, list) {
                        html += '<li>' +
                            ' <a href="javascript:void(0);" onclick=""> ' +
                            '<img src=' + list.imagePath + ' alt="" />' +
                            '<p>' + list.title + '</p>' +
                            '<span class="snPrice">&yen;<em>' + list.price + '.00</em></span> </a>' +
                            ' </li>'
                    });
                    $('#main').html(html);
                },
                //失败响应的结果
                error: function () {
                    alert('失败');
                }
            });
        })
    </script>
</head>

<body>
    <!-- 公用头部导航 -->
    <nav class="nav">
        <a class="goback" href="javascript:history.back(1)"></a>
        <div class="nav-title">商品列表</div>
        <a href="#" class="home"></a>
    </nav>
    <section class="layout">
        <!--一行两图，每行是一个无序列表ul，有两个li的列表项，每个列表项有一幅图片、一段文字、一个价格标签  -->
        <ul class="jhy1 wbox" id="main">

        </ul>
    </section>
    <!-- 公用尾部 -->
    <footer class="footer">
        <ul class="foot-list">
            <li>
                <a name="shouye_none_weibu_word01" href="#" id="footerLogin" class="foot1">登录</a>
                <a name="shouye_none_weibu_word02" href="#" id="footerRegister" class="foot2">注册</a>
                <a name="shouye_none_weibu_word03" href="#" id="shopCartTip" class="foot3">购物车</a>
            </li>
        </ul>
        <div class="copyright">
            Copyright&copy; 2018-2020 m.yigou.com
        </div>
    </footer>
</body>

</html>